<template>
  <div class="main-container" style="display: flex; width: 1844px; ">


    <div class="outDiaBox" v-if="dialogTableVisible">

      <div class="inBox">
        <img class="img" @click="dialogTableVisible = false" src="./policyImg/close.png" alt="">

        <div class="title">资源单体详情</div>
        <div class="tabBox">
          <el-table :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-cell-style="{
            'border-radius': 0,
            border: '1px solid #0C8F96',
            'background-color': 'rgba(117,215,225,0.2)',
            'text-align': 'center',
            'font-size': '16px',
            color: '#17274A',
            'font-weight': 'bold',
          }" :data="tableData" max-height="110px" border style="width: 100%">
            <el-table-column prop="date" align="center" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="name" align="center" label="有功" width="180">
            </el-table-column>
            <el-table-column prop="address" align="center" label="容量">
            </el-table-column>
            <el-table-column prop="xt" align="center" label="下调能力">
            </el-table-column>
            <el-table-column prop="bw" align="center" label="并网设备">
            </el-table-column>
          </el-table>
        </div>

        <div class="title2box">
          下调能力曲线
        </div>
        <div class="diaLogEchart" ref="diaLogEcharRef"></div>

      </div>
    </div>

    <div class="container_left">
      <el-button type="primary" @click="$router.push('/')" style="width: 120px; position: absolute;top: -60px;"
        icon="el-icon-arrow-left">返回上一级</el-button>
      <div class="title">
        <div class="top">
          <div class="left">
            <div class="img"></div>
            <div>翔宇变2号主变.高</div>
          </div>
          <div class="right">
            2024-06-19 09:00:00
          </div>

        </div>
        <div class="bottom">
          <div class="left">
            <div>越限量: <span style="color: #0c7673">3.6</span></div>
            <div>最大值: <span style="color: red">43.6</span></div>
            <div>限值: <span style="color: #0c7673">3.6</span></div>
            <div class="fuzai">负载率:<el-progress width="180" :percentage="109" status="exception"></el-progress>
              <div class="lv">109%</div>
            </div>
          </div>
          <div class="right"></div>
        </div>
      </div>

      <div class="content">
        <div class="text">
          翔宇变2号主变.高<span style='color: red; font-size: 18px;margin-left: 20px;'>43.6</span>
        </div>

        <div class="line">
        </div>
      </div>

      <div class="content2">
        <div class="small" @click="openDialogEvt(it)" v-for="it in lineImgData" :key="it.name">
          <div class="small_Line">
          </div>

          <!-- <img :src="require('@/assets/images/' + item.img + '.png')" /> -->
          <img v-if="it.text == '纯负荷'" src="./policyImg/cfh.png" alt="">
          <img v-if="it.text == '储能'" src="./policyImg/cn.png" alt="">
          <img v-if="it.text == '非统调常规'" src="./policyImg/ftdcg.png" alt="">
          <img v-if="it.text == '统调小机'" src="./policyImg/tdxj.png" alt="">
          <img v-if="it.text == '集中式分布'" src="./policyImg/jzsfb.png" alt="">
          <img v-if="it.text == '分布式光伏'" src="./policyImg/fbsgf.png" alt="">
          <img v-if="it.text == '可调负荷'" src="./policyImg/ktfh.png" alt="">
          <img v-if="it.text == '蓄力电厂'" src="./policyImg/xndc.png" alt="">
          <img v-if="it.text == '微电网'" src="./policyImg/wdw.png" alt="">
          <div class="text">{{ it.text }}</div>
          <div class="num">{{ it.num }}</div>
        </div>

      </div>

      <div class="bottomLine">
        <div v-for="it in timeLineData" :key="it.time" class="greyBox">
          <div class="boll">
            <div class="cnBoll">

            </div>
          </div>
          <el-popover placement="bottom" width="240" trigger="click">

            <div>
              <el-button type="primary" size="mini" @click="">{{ it.time.slice(0, 3) }}15</el-button>
              <el-button type="primary" size="mini" @click="">{{ it.time.slice(0, 3) }}30</el-button>
              <el-button type="primary" size="mini" @click="">{{ it.time.slice(0, 3) }}45</el-button>
            </div>

            <div class="time" slot="reference">{{ it.time }}</div>
          </el-popover>
        </div>
      </div>

    </div>
    <div class="container_right">
      <div class="top">
        <span class="title">调整策略</span>
        <div class="tzcl">
          <div class="head">
            <div>地调需求量</div>
            <div>计算调节量</div>
            <div>越限剩余量</div>
          </div>
          <div class="body">
            <div class="conten_line">
              <div class="leftBox"> 网侧调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang">
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">负荷转供</div>
                  <div style="text-indent: 15px;">10</div>
                  <div style="color: orange;text-indent: 28px;">7</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>
            <div class="conten_line">
              <div class="leftBox"> 储能调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang">
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">储能调整</div>
                  <div style="text-indent: 15px;">3</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>

            <div class="conten_line">
              <div class="leftBox"> 电源调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang danHang2">
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">非统调电源</div>
                  <div style="text-indent: 15px;">3</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">统调电源</div>
                  <div style="text-indent: 15px;">3</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
              </div>
            </div>
            <div class="xxArray">
            </div>

            <div class="conten_line">
              <div class="leftBox"> 负荷侧调整 </div>
              <div class="arrBox">
              </div>
              <div class="danHang danHang3">
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">可调负荷调整</div>
                  <div style="text-indent: 15px;">3</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">虚拟电厂调整</div>
                  <div style="text-indent: 15px;">3</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">3</div>
                </div>
                <div class="conBox">
                  <div style="color: #0c7673; text-indent: 15px;">微电网调整</div>
                  <div style="text-indent: 15px;">0.5</div>
                  <div style="color: orange;text-indent: 28px;">0</div>
                  <div style="text-indent: 32px;">0.5</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="title">平衡调整结果</div>
        <div id="phtzxg" ref="phtzxg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import homeMap from "@/utils/home/home.map";
import mock from "@/utils/home/home.mockdata.js";
import mapJson from "@/utils/home/mapJson/jiangsu.json";
export default {
  name: "province2",
  data() {
    return {
      DialogOption: {
        xAxis: {
          type: 'category',
          data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', , '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 6, 3,],
            type: 'line',
            smooth: true
          }
        ]
      },


      dialogTableVisible: false,
      tableData: [{
        date: '智慧园区',
        name: '2.15',
        address: '3.6',
        xt: '0.51',
        bw: '双悦2号136线'
      }, {
        date: '智慧园区',
        name: '1.04',
        address: '4',
        xt: '0.12',
        bw: '双悦2号136线'
      }, {
        date: '智慧园区',
        name: '2.15',
        address: '4',
        xt: '3.6',
        bw: '双悦2号136线'
      }, {
        date: '智慧园区',
        name: '2.15',
        address: '4',
        xt: '3.6',
        bw: '双悦2号136线'
      }],

      timeLineData: [
        {
          time: '01:00'
        },
        {
          time: '02:00'
        },
        {
          time: '03:00'
        },
        {
          time: '04:00'
        },
        {
          time: '05:00'
        },
        {
          time: '06:00'
        },
        {
          time: '07:00'
        },
        {
          time: '08:00'
        },
        {
          time: '09:00'
        },
        {
          time: '10:00'
        },
        {
          time: '11:00'
        },
        {
          time: '12:00'
        },
        {
          time: '13:00'
        },

        {
          time: '14:00'
        },
        {
          time: '15:00'
        },
        {
          time: '16:00'
        },
        {
          time: '17:00'
        },

        {
          time: '18:00'
        },
        {
          time: '19:00'
        },
        {
          time: '20:00'
        },

        {
          time: '21:00'
        },
        {
          time: '22:00'
        },
        {
          time: '23:00'
        },
        {
          time: '24:00'
        },

      ],

      lineImgData: [
        {
          text: '纯负荷',
          num: 2.07,
          img: "cfh"
        },
        {
          text: '储能',
          num: 1.56,
        },
        {
          text: '非统调常规',
          num: 2.24,
        },

        {
          text: '统调小机',
          num: 2.47,
        },
        {
          text: '集中式分布',
          num: 1.97,
        },

        {
          text: '分布式光伏',
          num: 1.97,

        },


        {
          text: '可调负荷',
          num: 2.10,
        },
        {
          text: '蓄力电厂',
          num: 2.35,
        },
        {
          text: '微电网',
          num: 1.99,
        },
      ],


      phtzxgChart: undefined,
      phtzxgChartOption: {
        color: ["#ac984b", "#dd8b79", "#9579e0", "#5fb5b6", "#6fc5f2"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "6%",
          type: "plain",
          data: ["限额", "基态潮流", "网侧调整", "储能调整", "电源调整", "负荷侧调整"],
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "限额",
            type: "line",


            smooth: true,
            data: [60, 60, 60, 60, 60, 60, 60],

          },
          {
            name: "基态潮流",
            type: "line",


            smooth: true,
            data: [20, 62, 91, 92, 80, 20, 20],

          },
          {
            name: "网侧调整",
            type: "line",


            smooth: true,
            data: [15, 55, 85, 87, 75, 15, 20],

          },
          {
            name: "储能调整",
            type: "line",
            data: [10, 50, 80, 82, 70, 10, 20],
            smooth: true,

          },
          {
            name: "电源调整",
            type: "line",
            smooth: true,
            data: [5, 45, 75, 77, 65, 15, 20],

          },
          {
            name: "负荷侧调整",
            type: "line",


            smooth: true,
            data: [0, 40, 70, 72, 60, 10, 20],
          },
        ],
      },

    };
  },
  computed: {
    riNeiOrQian: {
      get() {
        return this.$store.state.home.riNeiOrQian;
      },
    },
    customTooltipText() {
      let hour = ("00" + Math.floor(Math.abs(this.sliderValue) / 4)).slice(-2);
      let mm = ("00" + (Math.abs(this.sliderValue) % 4) * 15).slice(-2);
      return `${hour}:${mm}`;
    },
  },
  watch: {
    riNeiOrQian: {
      //deep:true,//监听对象深度监听
      immediate: true, //立即监听
      handler(newVal, oldVal) {
        if (newVal == "rn") {
          this.timeLineList = mock.resource_timelineList_rn;
        } else if (newVal == "rq") {
          this.timeLineList = mock.resource_timelineList;
        }
      },
    },
  },
  created() {


    if (sessionStorage.getItem('DWLX')) {
      this.myPageType = sessionStorage.getItem('DWLX')
    }
    this.initMychart2Optin()

  },
  mounted() {
    //初始化时间标签
    const now = new Date();
    const hour = now.getHours();
    const minutes = now.getMinutes();
    this.sliderValue = -Math.floor((hour * 60 + minutes) / 15);
  },
  methods: {
    openDialogEvt() {
      this.dialogTableVisible = true
      this.initMydialogEcharts()
    },
    // 生成随机数的方法
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },

    TimeLineChangeEvt(it) {
      this.lineImgData.forEach((it)=>{
        

      })

    },


    initMydialogEcharts() {
      this.$nextTick(() => {
        const chartDom = this.$refs.diaLogEcharRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.DialogOption)
      })

    },

    initMychart2Optin() {
      this.$nextTick(() => {
        const chartDom = this.$refs.phtzxg
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.phtzxgChartOption)
      })
    },


    // goDidiao() {
    //   this.$emit("redirect", "business", "didiao");
    // },

  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-container {
  height: 1060px;
  padding-top: 50px;

  width: 1030px;
  background: url(../../assets/images/bg.png) no-repeat left bottom;
  box-sizing: 100%;
  position: relative;
  justify-content: center;

  .outDiaBox {
    position: absolute;
    width: 988px;
    height: 502px;
    top: 100px;
    background: url(./policyImg/dialogOut.png) no-repeat;
    z-index: 999;

    .inBox {
      width: 927px;
      height: 401px;
      background: url(./policyImg/inZiyuan2.png) no-repeat;
      box-sizing: 100% 100%;
      margin: auto;
      margin-top: 70px;
      position: relative;

      .img {
        position: absolute;
        right: 20px;
        cursor: pointer;
      }

      .title {
        font-size: 18px;
        color: #00706b;
        font-weight: 600;
        text-indent: 50px;
        padding-top: 7px;
        box-sizing: border-box;
      }

      .tabBox {
        width: calc(100% - 40px);
        margin: 0 auto;
        margin-top: 20px;
      }

      .title2box {
        background: url(./policyImg/diaTitle2.png) no-repeat;
        height: 40px;
        margin-top: 20px;
        font-size: 18px;
        color: #00706b;
        font-weight: 600;
        text-indent: 50px;
        padding-top: 7px;
        box-sizing: border-box;
      }

      .diaLogEchart {
        width: 100%;
        height: 190px;
      }


    }
  }
}

.container_left {
  margin: auto;
  width: 1030px;
  height: 915px;
  // background-image: url(./policyImg/fzjc_left.png);
  background: url(./policyImg/zk.png);
  // background-position: -23px -58px;
  // background-repeat: no-repeat;
  padding: 0px 10px;
  box-sizing: border-box;
  background-size: 100%;
  position: relative;

  .bottomLine {
    margin-top: 100px;
    width: 1011px;

    height: 50px;
    background: url(./policyImg/bottomLine.png) no-repeat top center;
    display: flex;
    justify-content: space-between;

    .greyBox {
      width: 38px;
      height: 100%;

      .boll {
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: linear-gradient(to bottom, #eea6ba9e, #f0dae578), ;

        .cnBoll {
          background-color: grey;
          width: 8px;
          height: 8px;
          margin-top: 5px;
          border-radius: 50%;
        }
      }

      .time {
        height: 40%;
        width: 100%;
        border-radius: 4px;
        background-color: #dfe6e9;
        border: 1px solid #c4c7c8;
        font-size: 13px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }

  .title {
    width: 944px;
    height: 79px;
    margin: 0 auto;
    background: url(./policyImg/titleBk.png);
    margin-top: 30px;

    .top {
      height: 50%;
      margin: auto;
      width: calc(100% - 20px);
      border-bottom: 1px dashed #6bcee2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;

      .left {

        display: flex;

        div {
          height: 22px;
          line-height: 22px;
          color: red;
          font-weight: 600;
        }

        .img {
          width: 23px;
          height: 22px;
          background: url(./policyImg/-h-icon.png);
          margin-right: 8px;
        }


      }

    }

    .bottom {

      height: 50%;
      margin: auto;
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        width: 750px;

        div {
          width: 120px;
          text-align: center;
          font-weight: 600;
        }

        .fuzai {
          width: 580px;
          display: flex;
          align-items: center;

          .lv {
            width: 20px;
            color: red;
          }

          ::v-deep .el-progress {
            width: 185px;

          }

          ::v-deep .el-icon-circle-close {
            display: none
          }
        }


      }

      .right {
        width: 38px;
        height: 15px;
        background: url(./policyImg/detail.png) no-repeat;
        cursor: pointer;

      }
    }
  }

  .content {
    height: 229px;
    width: 100%;
    background: url(./policyImg/zu.png) no-repeat center;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .text {
      margin-left: 260px;
    }

    .line {
      position: absolute;
      top: 212px;
      left: 506px;
      height: 40px;
      width: 2px;
      border: 1px dashed gray;
    }
  }



  .content2 {
    padding-left: 4px;
    box-sizing: border-box;
    margin-top: 24px;
    height: 229px;
    width: 100%;
    display: flex;


    .small {
      width: 188px;
      height: 100%;
      border-top: 2px dashed gray;
      text-align: center;
      cursor: pointer;

      .small_Line {
        height: 100px;
        width: 1px;
        border: 1px dashed gray;
        margin: 0 auto;
      }

      .text {
        text-align: center;
        margin: 8px 0px;
        // font-size: 14px;
      }

      .num {
        margin: auto;
        width: 90px;
        background: #deeff7db;
        color: #25aafe;
        width: 60px;
        height: 22px;
        line-height: 22px;
      }
    }

  }

}

.container_right {
  width: 754px;

  .top {
    width: 100%;
    height: 454px;
    background-image: url(./policyImg/fzjc_right.png);
    background-size: 100%;

    .title {
      line-height: 34px;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
      margin-left: 48px;
    }

    .tzcl {
      width: 100%;
      position: relative;

      .head {
        width: 415px;
        height: 31px;
        position: absolute;
        top: -40px;
        right: 0;
        margin-top: 10px;
        display: flex;

        div {
          background-image: url(./policyImg/ploy-label.png);
          background-repeat: no-repeat;
          background-size: 100%;
          text-align: center;
          width: 124px;
          height: 24px;
          font-size: 14px;
          margin: 0 2px;
          font-weight: bold;
        }
      }

      .body {
        margin-top: 55px;
        // display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 50px;
        box-sizing: border-box;

        .conten_line {
          width: 100%;
          margin: auto;
          display: flex;
          align-items: center;

          .leftBox {
            width: 161px;
            height: 40px;
            background: url(./policyImg/blueDi.png) no-repeat;
            text-align: center;
            line-height: 40px;
          }

          .arrBox {
            width: 47px;
            height: 40px;
            background: url(./policyImg/arrayRight.png) no-repeat;

          }

          .danHang {

            background: url(./policyImg/dHang.png) no-repeat;
            background-size: 100%;

            .conBox {
              width: 483px;
              height: 32px;
              display: flex;
              align-content: center;
            }

            div {
              width: 25%;
              height: 45px;
              line-height: 45px;

            }
          }

          .danHang2 {
            background: url(./policyImg/dangHang2.png) no-repeat;
            background-size: 100%;
          }

          .danHang3 {
            background: url(./policyImg/danHang3.png) no-repeat;
            background-size: 100%;
          }
        }

        .xxArray {
          width: 14px;
          margin-left: 70px;
          height: 24px;
          background: url(./policyImg/xxarray.png) no-repeat;
        }

      }
    }
  }

  .bottom {
    width: 100%;
    height: 454px;
    margin-top: 10px;
    background-image: url(./policyImg/fzjc_right.png);

    .title {
      line-height: 34px;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
      margin-left: 48px;
    }

    #phtzxg {
      padding-left: 20px;
      height: 400px;
    }
  }
}





.textBox {
  height: 33px;
  padding-left: 30px;
  box-sizing: border-box;
  font-size: 14px;
  width: 331px;
}

// ::v-deep .el-progress-bar__outer {
//   background: #c1e0dd !important;
// }

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}

::v-deep .el-slider.is-vertical .el-slider__runway {
  width: 6px;
  height: 100%;
  margin: 0 16px;
  background-color: transparent;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

::v-deep .el-slider.is-vertical .el-slider__bar {
  width: 6px;
  height: auto;
  border-radius: 0 0 3px 3px;
  background-color: transparent;
}

::v-deep .el-slider__button {
  width: 150px;
  height: 30px;
  //border: solid 2px #000;
  //background-color: #000;
  //border-radius: 50%;
  border: none;
  border-radius: 0;
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
